<!--
  图标组件
  使用示例：<icon-font name="icon-caigou" color="#FF6600" />
  参数说明：name：图标名称，color：图标颜色，bgcolor：背景颜色，size 宽高
-->
<template>
  <span :style="sizeStyle" :class="prefix + name"></span>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  const props = defineProps({
    prefix: {
      type: String,
      default: 'iconfont ',
    },
    //图标名字
    name: String,
    //颜色
    color: {
      type: String,
      default: '',
    },
    //背景颜色
    bgcolor: {
      type: String,
      default: '',
    },
    //图标的宽度
    size: {
      type: String,
      default: '48rpx',
    },
  });
  const sizeStyle = computed(() => {
    const style: any = {
      'font-size': props.size,
      color: props.color,
      'background-color': props.bgcolor,
    };
    return style;
  });
</script>

<style scoped></style>
